<template>
  <div class="big_box">
    <div class="top_box">
      <!--    -->
      <div class="logo_box">
        <img :src="logo" alt=""/>
      </div>
      <p>点击下方[立即分享] 按钮，即可把授权链接分享至您配偶微信。请配偶点击链接后，依次完成数据授权及人脸识别</p>
    </div>

    <!--按钮-->
    <div class="bottom_box">
      <div class="button_box">
        <van-button style="height: 100%" type="danger" size="large"
                    v-clipboard:copy="url"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError">
          立即分享
        </van-button>
      </div>

      <div class="tip_box">
        <p>温馨提示：</p>
        <p>请勿将授权链接转发或分享给其他人员，仅限配偶本人使用！</p>
      </div>
    </div>

    <van-popup v-model="show" round position="bottom" :style="{ height: '30%',background:'#EEEEEE' }" :closeable="true">
      <div class="popupBox">
        <div class="tip_box">
          <van-icon size="20" color="#19be6b" name="info"/>
          <p>链接复制成功</p>
        </div>
        <div class="fz_box">
          <!--          <Ellipsis :tooltip="false" :text="zthUrl" :height="100"/>-->
          <p>
            {{ zthUrl }}
          </p>
        </div>
        <div class="butt_box">
          <van-button style="height: 100%" size="large" type="primary" @click="toWeChat">去微信粘贴给配偶</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
/**
 * pad端picker选择器
 * <ab-dict v-model="data.kjcs.sjzd" width="300" placeholder="Enter something..." dict-key="jds" checkbox="true">​</ab-dict>
 */
import Vue from 'vue'
import {Popup, Button, Icon, Toast} from 'vant';

Vue.use(Popup)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Toast)
export default {
  props: {
    shareUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      logo:'',
      url: '',
      show: false,
      zthUrl: ''
    }
  },
  updated() {

  },
  mounted: function () {
  },
  created() {
    // this.url = window.location.href
    this.times(this.shareUrl)
  },
  methods: {
    creatUrl(oldUrl) {
      let url = ''
      if (oldUrl.includes('?')) {
        url = oldUrl + "&creatTime=" + (new Date()).valueOf()
      } else {
        url = oldUrl + "?creatTime=" + (new Date()).valueOf()
      }
      return url;
    },
    times(NewUrl) {                        //定义了一个times()方法来执行定时查询findDB()
      return setInterval(() => {                        //setInterval换个名字就行了
        this.url = this.creatUrl(NewUrl)
      }, 1000)                //设置时间，这里是1分钟
    },
    toWeChat() {
      this.show = false
    },
    onCopy: function (e) {
      console.log("复制", e)
      this.show = true
      this.zthUrl = e.text
      // Toast('已复制： ' + e.text)
    },
    onError: function (e) {
      console.log(e)
      Toast('复制失败!')
    },
  },
  watch: {}
}
</script>
<style lang="less" scoped>
.big_box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 100;
}

.top_box {
  width: 100%;
  //background-color: #2db7f5;
  margin: 0 0 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;

  p {
    padding: 30px;
    font-size: 16px;
    font-weight: 500;
  }
}

.logo_box {
  width: 70%;
  height: auto;
  //background-color: #eeeeee;

  img {
    width: 100%;
    height: 100%;
  }

}

.bottom_box {
  width: 100%;

  .button_box {
    width: 60%;
    height: 45px;
    margin: 0 auto;
  }

  .tip_box {
    padding: 25px;

    p {
      font-size: 16px;
      font-weight: 500;
    }
  }
}


//弹出框部分
.popupBox {
  //display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: relative;

  .tip_box {
    font-size: 16px;
    width: 100%;
    //height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;


    p {
      margin-left: 8px;
      font-size: 16px;
    }
  }
}


.fz_box {
  position: absolute;
  bottom: 70px;
  top: 66px;
  left: 16px;
  right: 16px;
  background: #FFFFFF;
  border-radius: 8px;
  //margin-bottom: 56px;
  padding: 10px;
  //width: 100%;
  //height: auto;
  //word-break: break-all;
  //overflow: hidden; //超出隐藏
  //text-overflow: ellipsis; //溢出用省略号...显示
  //display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
  //-webkit-box-orient: vertical; //从上到下垂直 排列子元素（设置伸缩盒子的子元素排列方式）
  ////-webkit-line-clamp: 3; //表示显示的行数合上面两个属性，表示显示的行数
}

.butt_box {
  height: 40px;
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
}
</style>
